<template>
  <s-layout class="set-wrap" title="评价" :bgStyle="{ color: '#f7f7f7' }">
    <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无常见问题" icon="/static/collect-empty.png" />
    <view class="flex flex-col gap-4 justify-center items-center p-4 bg-white">
      <view class="aspect-square overflow-hidden w-1/4 bg-gray-50 rounded-lg">
        <image :src="state.obj.image" class="size-full" mode="aspectFill" />
      </view>
      <view class="text-[1.25rem] text-[#111111] font-bold">{{ state.obj.name }}</view>
      <view class="flex flex-col gap-1 justify-center items-center">
        <u-rate :count="state.count" v-model="state.score"></u-rate>
        <view class="text-[1rem] text-[#FF1632] font-bold"> 评分：{{ state.score }}</view>
      </view>
      <u-line></u-line>
      <!-- <textarea placeholder="留下您的评论" v-model="state.content" class="px-4 w-full"></textarea> -->

      <uni-easyinput
        v-model="state.content"
        placeholder="留下您的评论"
        type="textarea"
        placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
        :styles="{ disableColor: '#fff', color: '#333' }"
        :inputBorder="false"
      >
      </uni-easyinput>

      <view class="flex flex-col gap-3 w-full">
        <s-uploader
          v-model:url="state.images"
          :key="state.images"
          fileMediatype="image"
          limit="4"
          mode="grid"
          :imageStyles="{ width: '168rpx', height: '168rpx' }"
        >
        </s-uploader>
        <view class="text-[.875rem] text-[#747474]"> 发图更能有效帮助他人哦～ </view>
      </view>
    </view>

    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center" @click="submit">
        <view class="font-medium text-[1rem] text-[#FFFFFF]"> 发布 </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    list: [],
    loading: true,
    count: 5,
    score: 0,
    content: '',
    images: [],
    obj: {},
  });

  onLoad((options) => {
    const obj = JSON.parse(decodeURIComponent(options.obj));
    state.value.obj = obj;
  });
  function submit() {
    const params = {
      content: state.value.content,
      images: state.value.images.join(','),
      score: state.value.score,
      id: state.value.obj.id,
    };

    sheep.$api.yy.storeEvaluate(params).then((res) => {
      if (res.code === 1) {
        uni.showToast({
          title: '评论成功',
        });
        state.value.content = '';
        state.value.images = [];
        state.value.score = 0;
        // 返回
        uni.navigateBack({
          delta: 1,
        });
        // setTimeout(() => {
        //   uni.navigateBack({
        //     delta: 1,
        //   });
        // }, 1000);
      }
    });
  }
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }
  }
</style>
